<template>
  <div>
    <div class="topinfo" @click="JumpEdit">
      <img v-if="imgsrc" :src="this.$axios.defaults.baseURL+imgsrc" alt />
      <img v-else src="@/assets/logo.png" alt />
      <div class="userinfo">
        <div class="nickname">
          <span v-if="gender===1" class="iconfont iconxingbienan"></span>
          <span v-else class="iconfont iconxingbienv"></span>
          {{nickname}}
        </div>
        <div class="time">{{time}}</div>
      </div>
      <div class="arrow">
        <span class="iconfont iconjiantou1"></span>
      </div>
    </div>

    <TabBar lefttext="我的关注" righttext="关注的用户" @handleClick="JumpRouter"></TabBar>
    <TabBar lefttext="我的跟帖" righttext="跟帖/回复" @handleClick="JumpRouter3"></TabBar>
    <TabBar lefttext="我的收藏" righttext="文章/视频" @handleClick="JumpRouter2"></TabBar>
    <TabBar lefttext="设置" righttext></TabBar>

    <button @click="logout" class="out">退出</button>

    <!-- <AutoBtn btntext="退出" @click="logout"></AutoBtn> -->
  </div>
</template>
<script>
// 引入组件
import TabBar from "@/components/TabBar.vue";
import AutoBtn from "@/components/AutoBtn.vue";
export default {
  // 注册子组件
  components: {
    TabBar,
    AutoBtn
  },
  data() {
    return {
      imgsrc: "",
      nickname: "",
      time: "",
      gender: ""
    };
  },
  methods: {
    logout() {
      localStorage.removeItem("id");
      localStorage.removeItem("token");
      //跳转到登录页
      this.$router.replace("/login");
    },
    JumpRouter() {
      this.$router.push({
        path: "/attention"
      });
    },
    JumpRouter2() {
      this.$router.push({
        path: "/mycollect"
      });
    },
    JumpRouter3() {
      this.$router.push({
        path: "/mycomments"
      });
    },
    JumpEdit() {
      this.$router.push({
        path: "/edit"
      });
    }
  },
  mounted() {
    const Id = localStorage.getItem("id");

    //挂载完发送ajax请求
    this.$axios({
      url: "/user/" + Id,
      method: "GET",
      headers: {
        Authorization: localStorage.getItem("token")
      }
    }).then(res => {
      console.log(res.data);
      // 解构data
      if (res.data) {
        const { head_img, nickname, create_date, gender } = res.data.data;
        this.imgsrc = head_img;
        this.nickname = nickname;
        this.time = create_date.split("T")[0];
        this.gender = gender;
      }
    });
  }
};
</script>

<style lang="less" scoped>
.topinfo {
  display: flex;
  padding: 7.778vw 5.556vw;
  border-bottom: 4px solid #e4e4e4;
  img {
    width: 19.444vw;
    height: 19.444vw;
    border-radius: 50%;
  }
  .userinfo {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    padding-left: 5.556vw;
    .time {
      color: #a0a0a0;
      font-size: 16px;
      padding-top: 2.778vw;
    }
    .nickname {
      .iconxingbienan {
        color: #78bbeb;
      }
      .iconxingbienv {
        color: #f149c2;
      }
    }
  }
  .arrow {
    display: flex;
    align-items: center;
  }
}
.out {
  width: 100%;
  height: 11.111vw;
  background: none;
  color: #666;
  margin-top: 10px;
  border: none;
}
</style>